<template>
  <div class="app">
    <router-view></router-view>
    <div class="nav">
        <div @click="selectMenu(1)" class="menu">
             <router-link class="tab-item" to="/home/first">
                <div v-if="menu1">
                    <img src="../Nav/home.png"/>
                    <p class="tab-link">首页</p>
                </div>
                <div v-else>
                     <img src="../Nav/home_hot.png"/>
                    <p class="tab-link1">首页</p> 
                </div>
             </router-link>
        </div>
        <div @click="selectMenu(2)" class="menu">
             <router-link class="tab-item" to="/home/subsidies">
                <div v-if="menu2">
                    <img src="../Nav/butie.png"/>
                    <p class="tab-link">找补贴</p>
                </div>
               <div v-else>
                    <img src="../Nav/butie_hot.png"/>
                    <p class="tab-link1">找补贴</p>
               </div>
            </router-link>
        </div>
        <div @click="selectMenu(3)" class="menu">
             <router-link class="tab-item" to="/home/active">
                <div v-if="menu3">
                    <img src="../Nav/huodong.png"/>
                    <p class="tab-link">活动</p>
                </div>
                <div v-else>
                    <img src="../Nav/huodong__hot.png"/>
                    <p class="tab-link1">活动</p>
                </div>
             </router-link>
        </div>
        <div @click="selectMenu(4)" class="menu">
             <router-link class="tab-item" to="/home/mine">
                <div v-if="menu4">
                     <img src="../Nav/my.png"/>
                    <p class="tab-link">我的</p>
                </div>
                <div v-else>
                    <img src="../Nav/my_hot.png"/>
                    <p class="tab-link1">我的</p>
                </div>
            </router-link>
        </div>
     
    </div>
  </div>
</template>

<script>
  export default {
      data(){
          return {
              menu1:false,
              menu2:true,
              menu3:true,
              menu4:true
          }
      },
        methods:{
            selectMenu(flag){
                if(flag==1){
                    this.menu1 = false;
                    this.menu2 = true;
                    this.menu3 = true;
                    this.menu4 = true;
                }else if(flag==2){
                    this.menu1 = true;
                    this.menu2 = false;
                    this.menu3 = true;
                    this.menu4 = true;
                }else if(flag==3){
                    this.menu1 = true;
                    this.menu2 = true;
                    this.menu3 = false;
                    this.menu4 = true;
                }else if(flag===4){
                    this.menu1 = true;
                    this.menu2 = true;
                    this.menu3 = true;
                    this.menu4 = false;
                }
            }
        }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"

.tab-link1{color:#FF3D00;}
.tab-link{color:#555;}

.app .nav{
    height: 50px;
    line-height: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    background:#fff;
    padding:10px 0 10px 0;
    border-top:1px solid #ccc;
    left:0;
}
  .app .tab-item{
    flex: 1;
    text-decoration: none;
  }
.app .tab-item:hover,.app .tab-item:active{
  color:#FF3D00;
  background-color: #1c8de0;
}
.nav .menu{
    flex:1;
}
</style>
